<template>
	<view class="page">
		<swiper v-if="true" indicator-dots="true">
			<swiper-item v-for="(img,key) in imgUrls" :key="key">
				<image :src="img" />
			</swiper-item>
		</swiper>

		<view class="bgFFFFFF u-m-b-26" style="padding: 0rpx 26rpx;position: relative;">
			<image :src="url+items.logo"
				style="width: 80rpx;height: 80rpx; border-radius: 50%;position: absolute;top: -40rpx;"></image>
			<view class="u-p-t-40">
				<view class="title">{{items.title}} | {{items.level}}</view>
				<view class="head_title">
					医院简介
				</view>
				<view class="">
					<u-read-more class="text_content" :show-height="200" close-text="展开" text-indent="0" :toggle="true">
						<rich-text style="font-size: 22rpx;" :nodes="items.description"></rich-text>
					</u-read-more>
				</view>
			</view>
		</view>
		<view class="u-p-l-26 u-p-r-26 u-m-b-26 bgFFFFFF">
			<u-cell-group>
				<u-cell-item title="联系方式" :arrow="false" :value="items.tel"></u-cell-item>
				<u-cell-item title="地理位置" :value="items.address" :arrow="false"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-p-l-26 u-p-r-26 u-p-t-26 bgFFFFFF">
			<view class="head_title">
				医院相册
			</view>
		</view>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#272822" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" style="padding-left: 16rpx;" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view style="width: 46%;margin-right: 28rpx;display: inline-block;margin-bottom: 20rpx"
						v-for="(item,index) in environment" :key="index">
						<image :src="url+item"
							style="width: 100%;height: 300rpx;border-radius: 5rpx;display: inline-block;">
						</image>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view style="width: 46%;margin-right: 28rpx;display: inline-block;margin-bottom: 20rpx"
						v-for="(item,index) in video" :key="index">
						<video :src="url+item" poster=""
							style="width: 100%;height: 300rpx;border-radius: 5rpx;"></video>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view style="width: 46%;margin-right: 28rpx;display: inline-block;margin-bottom: 20rpx"
						v-for="(item,index) in honor" :key="index">
						<image :src="url+item"
							style="width: 100%;height: 300rpx;border-radius: 5rpx;display: inline-block;">
						</image>

					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view style="width: 46%;margin-right: 28rpx;display: inline-block;margin-bottom: 20rpx"
						v-for="(item,index) in qualification" :key="index">
						<image :src="url+item"
							style="width: 100%;height: 300rpx;border-radius: 5rpx;display: inline-block;">
						</image>

					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-button type="primary" style="width: 90%;margin: 40rpx auto;">申请入驻</u-button>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			console.log("e: ", e);
			this.hospitaldetail(e.id);
		},
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[]
				],
				list: [{
						name: '医院环境'
					},
					{
						name: '医院视频'
					},
					{
						name: '荣誉展示'
					},
					{
						name: '营业资格',
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				url: 'http://www.seoutr.com',
				showSwiper: false,
				imgUrls: [

				],
				items: [],
				environment: [],
				video: [],
				honor: [],
				qualification: []
			}
		},
		onNavigationBarButtonTap(e) {
			uni.showToast({
				title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
				icon: "none"
			})
		},
		methods: {
			radioChange(e) {
				this.showSwiper = e.detail.value === "swiper";
			},
			// tab栏切换
			change(index) {
				console.log("index: ", index);
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			// 页面数据  
			getOrderList(idx) {
				for (let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.dataList.length - 1);
					let data = JSON.parse(JSON.stringify(this.dataList[index]));
					data.id = this.$u.guid();
					this.orderList[idx].push(data);
				}
				this.loadStatus.splice(this.current, 1, "loadmore");
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 获取医院详情
			hospitaldetail(id) {
				this.$apiBasics.hospitaldetail({
					id: id
				}).then((res) => {
					console.log('request success', res)
					console.debug("获取医院详情")
					console.log(res.data.data);
					this.items = res.data.data;
					console.log(this.items.logo);

					// 拿到背景图
					let bannerim = this.items.bannerim;
					console.log("拿到背景图 bannerim: ", bannerim);
					this.imgUrls.push(this.url + bannerim)


					console.log("拿到图片数据拆分组合");
					// 医院环境
					this.environment = this.items.environment.split(",");
					// 医院视频
					this.video = this.items.video.split(",");
					// 荣誉展示
					this.honor = this.items.honor.split(",");
					// 营业资格
					this.qualification = this.items.honor.split(",")
					console.log()
					console.log("this.environment: ", this.environment);
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cont {
		width: 100%;

		.card {
			width: 50%;
		}
	}


	.title {
		font-weight: 700;
		line-height: 60rpx;
	}

	.head_title {
		font-weight: 700;
		font-size: 24rpx;
	}

	.text_content {}

	.page {
		background-color: #f3f4f6;
	}


	image,
	swiper,
	.img-view {
		width: 750rpx;
		width: 100%;
		height: 500rpx;
	}

	.page-section-title {
		margin-top: 50rpx;
	}
</style>
